<template>
  <a-button type="primary" class="mr-10" @click="download" v-permission="['workbench', 'auth', 'h5']">
    <!-- $store.getters.returnConfig.app.ios_url -->
    <template #icon>
      <CloudDownloadOutlined />
    </template>
    移动端
  </a-button>
  <!-- App下载 -->
  <a-modal
    v-model:visible="downLoadVisible"
    :width="750"
    footer=""
    :bodyStyle="{
      paddingTop: '10px !important',
    }"
    :closable="false"
  >
    <div>
      <a-tabs v-model:activeKey="downloadActiveKey">
        <template #rightExtra>
          <CloseOutlined
            style="font-size: 16px; cursor: pointer"
            @click="downLoadVisible = false"
          />
        </template>
        <a-tab-pane key="1" tab="管理端" />
        <a-tab-pane key="2">
          <template #tab> {{ $L("租客") }}端 </template>
        </a-tab-pane>
      </a-tabs>
    </div>
    <a-row type="flex" justify="space-around">
      <a-col v-if="iosUrl">
        <qrcode-vue
          :value="iosUrl"
          :size="150"
          class="code"
          :id="'canvas_' + 1"
        />
        <div style="text-align: center; margin-top: 12px; padding-left: 10px">
          IOS下载
          <a-button
            type="link"
            style="margin-right: 0px"
            @click="$utils.copyText(iosUrl)"
          >
            <a-tooltip>
              <template #title>点击复制网址</template>
              <CopyOutlined /> </a-tooltip
          ></a-button>
        </div>
      </a-col>
      <a-col v-if="androidUrl" style="padding-left: 10px">
        <qrcode-vue
          :value="androidUrl"
          :size="150"
          class="code"
          :id="'canvas_' + 2"
        />
        <div style="text-align: center; margin-top: 12px; padding-left: 10px">
          安卓下载
          <a-button
            type="link"
            style="margin-right: 0px"
            @click="$utils.copyText(androidUrl)"
          >
            <a-tooltip>
              <template #title>点击复制网址</template>
              <CopyOutlined /> </a-tooltip
          ></a-button>
        </div>
      </a-col>
      <a-col v-if="wxapp_id">
        <a-spin :spinning="wxappSpinning">
          <div v-if="wxappSpinning" style="width: 150px; height: 150px" />
          <img v-else :src="applet" style="width: 150px" />
        </a-spin>
        <div style="text-align: center; margin-top: 17px">微信小程序</div>
      </a-col>
      <a-col v-if="H5Url">
        <qrcode-vue
          :value="H5Url"
          :size="150"
          class="code"
          :id="'canvas_' + 3"
        />
        <div style="text-align: center; margin-top: 12px; padding-left: 10px">
          H5链接
          <a-button
            type="link"
            style="margin-right: 0px"
            @click="$utils.copyText(H5Url)"
          >
            <a-tooltip>
              <template #title>点击复制网址</template>
              <CopyOutlined />
            </a-tooltip>
          </a-button>
        </div>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
import { computed, defineComponent, createVNode, ref, watch } from "vue";
import { Modal } from "ant-design-vue";
import {
  CloseOutlined,
  CloudDownloadOutlined,
  CopyOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import utils from "@/common/utils/utils";
import store from "@/store";
import QrcodeVue from "qrcode.vue";
import request from "@/common/utils/request";

export default defineComponent({
  name: "ViewMobile",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    CloudDownloadOutlined,
    QrcodeVue,
    CopyOutlined,
    CloseOutlined,
  },
  setup(props, { emit }) {
    const downloadActiveKey = ref("1");
    const iosUrl = ref("");
    const androidUrl = ref("");
    const applet = ref("");
    const wxapp_id = ref("");
    const wxappSpinning = ref(false);
    const H5Url = ref("");
    const downLoadData = ref({});
    const downLoadVisible = ref(false);

    const getQrcode = (id) => {
      wxappSpinning.value = true;
      request
        .get("/third", "/open_wxapp/get_qrcode", {
          id,
        })
        .then((res) => {
          applet.value = res.url;
          wxappSpinning.value = false;
        });
    };
    const download = () => {
      downloadActiveKey.value = "1";
      request.get("/third", "/app/download").then((res) => {
        downLoadData.value = res.result;
        downLoadVisible.value = true;
        androidUrl.value = res.result.android_url;
        iosUrl.value = res.result.ios_url;
        H5Url.value = res.result.h5_url;
        wxapp_id.value = res.result.wxapp_id;
        if (res.result.wxapp_id) {
          getQrcode(res.result.wxapp_id);
        }
      });
    };

    watch(
      () => downloadActiveKey.value,
      (val) => {
        if (val == 1) {
          androidUrl.value = downLoadData.value.android_url;
          iosUrl.value = downLoadData.value.ios_url;
          H5Url.value = downLoadData.value.h5_url;
          wxapp_id.value = downLoadData.value.wxapp_id;
          if (downLoadData.value.wxapp_id) {
            getQrcode(downLoadData.value.wxapp_id);
          }
        } else {
          androidUrl.value = downLoadData.value.user_android_url;
          iosUrl.value = downLoadData.value.user_ios_url;
          H5Url.value = downLoadData.value.user_h5_url;
          wxapp_id.value = downLoadData.value.user_wxapp_id;
          if (downLoadData.value.user_wxapp_id) {
            getQrcode(downLoadData.value.user_wxapp_id);
          }
        }
      }
    );

    const resetData = () => {
      downloadActiveKey.value = "1";
      iosUrl.value = "";
      androidUrl.value = "";
      applet.value = "";
      wxapp_id.value = "";
      wxappSpinning.value = false;
      H5Url.value = "";
      downLoadData.value = {};
    };

    watch(
      () => downLoadVisible.value,
      (val) => {
        if (!val) {
          // 重置
          resetData();
        }
      }
    );

    return {
      downloadActiveKey,
      iosUrl,
      androidUrl,
      applet,
      wxapp_id,
      wxappSpinning,
      H5Url,
      downLoadVisible,
      download,
    };
  },
});
</script>

<style lang="less" scoped></style>
